import { Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'

// 自定义加载图标
const customIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />

// 页面级加载组件
export const PageLoading = ({ tip = '加载中...', size = 'large' }) => {
    return (
        <div className="flex items-center justify-center min-h-screen bg-gray-50">
            <Spin
                indicator={customIcon}
                size={size}
                tip={tip}
                className="text-blue-600"
            />
        </div>
    )
}

// 内容区域加载组件
export const ContentLoading = ({ tip = '加载中...', size = 'default' }) => {
    return (
        <div className="flex items-center justify-center py-12">
            <Spin
                indicator={customIcon}
                size={size}
                tip={tip}
                className="text-blue-600"
            />
        </div>
    )
}

// 按钮加载组件
export const ButtonLoading = ({ loading = false, children, ...props }) => {
    return (
        <Spin spinning={loading} indicator={<LoadingOutlined />}>
            {children}
        </Spin>
    )
}

// 卡片加载组件
export const CardLoading = ({ loading = false, children, tip = '加载中...' }) => {
    return (
        <Spin spinning={loading} tip={tip}>
            {children}
        </Spin>
    )
}

// 表格加载组件
export const TableLoading = ({ loading = false, children, tip = '数据加载中...' }) => {
    return (
        <Spin spinning={loading} tip={tip} size="large">
            {children}
        </Spin>
    )
}

// 全屏加载遮罩
export const FullScreenLoading = ({ visible = false, tip = '处理中...' }) => {
    if (!visible) return null

    return (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div className="bg-white rounded-lg p-8 shadow-lg">
                <Spin
                    indicator={customIcon}
                    size="large"
                    tip={tip}
                    className="text-blue-600"
                />
            </div>
        </div>
    )
}